<!-- 秒杀组件 -->
<template>
  <view :class="props.type == 'round' ? 'padding-lr-sm' : ''">
    <view
      class="list-round-area list-title dflex-b w-full bg-main"
      :class="props.type == 'round' ? 'border-radius' : ''"
      @click="goto"
    >
      <view class="dflex">
        <view
          v-if="props.iconfont && props.iconfont != ' '"
          class="iconfont __left"
          :class="props.iconfont"
          :style="{ color: props.iconColor }"
        />
        <text :style="{ fontSize: props.size + 'rpx', color: '#333' }">{{ props.title }}</text>
        <view v-if="!isEmpty(time)">
          <view class="time">{{ time }}</view>
          <uni-countdown
            :show-day="false"
            :hour="hour"
            :minute="minute"
            :second="second"
            :font-size="12"
            color="#FFFFFF"
            :background-color="props.iconColor"
            @timeup="timeup"
          />
        </view>
      </view>
      <view class="dflex">
        <text v-if="props.tip" class="tip margin-right-xs">{{ props.tip }}</text>
        <view
          class="iconfont fs-sm"
          :class="props.rightIcon"
          :style="{ color: props.rightColor }"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { isEmpty } from '@/utils/is';
  import { ref, onMounted } from 'vue';
  import moment from 'moment';

  const props = defineProps({
    type: {
      type: String,
      default: 'square',
    },
    title: {
      type: String,
      default: '列表标题',
    },
    size: {
      type: String,
      default: '28',
    },
    fwt: {
      type: String,
      default: 'normal',
    },
    tip: {
      type: [String, Number],
      default: '',
    },
    iconfont: {
      type: String,
      default: 'icon-miaosha1',
    },
    iconColor: {
      type: String,
      default: '#C0C4CC',
    },
    rightIcon: {
      type: String,
      default: 'icon-gengduo1',
    },
    rightColor: {
      type: String,
      default: '#c0c0c0',
    },
  });
  // 事件
  const emits = defineEmits(['goto']);

  const time = ref<number>();
  const hour = ref<number>();
  const minute = ref<number>();
  const second = ref<number>();

  const countDown = () => {
    let h = moment().hour();
    h = h % 2 == 0 ? h + 2 : h + 1;
    console.log('hour', h);
    time.value = h - 2;

    let t1 = moment();
    let t2 = moment().hour(h).minute(0).second(0);
    let c = moment.duration(t2 - t1, 'ms');
    hour.value = c.get('hours');
    minute.value = c.get('minutes');
    second.value = c.get('seconds');
  };

  onMounted(() => {
    countDown();
  });

  // 倒计时结束时执行
  const timeup = () => {};

  // 父组件回调函数
  const goto = () => {
    console.log('goto');
    emits('goto');
  };
</script>

<style lang="scss">
  .list-title {
    height: 40rpx;
    line-height: 40rpx;
    padding: 16rpx 10rpx 0rpx 10rpx;

    .__left {
      font-size: $uni-font-size-lg;
      margin-left: 6rpx;
      margin-right: 6rpx;
    }

    .iconfont {
      color: #c0c0c0;
    }

    .tip {
      font-size: $uni-font-size-sm;
      color: #c0c0c0;
    }
  }

  .time {
    height: 100%;
    color: #ff2727;
    letter-spacing: 0;
    padding-right: 10rpx;
    padding-left: 10rpx;
    float: left;
    position: relative;
    left: -2rpx;
    margin-top: 8rpx;
    font-size: 12px;
    line-height: 1.2;
  }
  .time::after {
    height: 38rpx;
    width: 40rpx;
    content: '';
    display: inline-block;
    vertical-align: middle;
    background-image: url('@/assets/images/dian-chang.png');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
  }
</style>
